<template>
	<div class="m-20px min-h-540px relative">
		<!-- 您将支付 -->
		<div class="quick-top-box-right-div">
			<p>您将支付</p>
			<div class="flex items-center justify-between">
				<el-input v-model="sellAmount" :placeholder="limit.sellCoin[sellCoinSelected.coin].content" @blur="getBlur"
					@focus="getFocus('sell')" class="quick-top-box-right-input" clearable style="height:40px;" />
				<!-- 支付币种选中 -->
				<img :src="sellCoinSelected.icon" style="width: 20px;height:20px;">
				<el-select v-model="sellCoinSelected.coin" :suffix-icon="CaretBottom" class="m-2 quick-top-box-right-select"
					size="large" @change="sellCoinSelectedChange" style="width: 100px;height: 40px;"
					popper-class="c2c-select-popper" placement="bottom-end">
					<el-option v-for="(item, index) in sellCoinList" :label="item.coin" :value="item.coin" :key="index">
						<div>
							<div>
								<img :src="item.icon" alt="">
								<span class="text-dark-700">
									{{ item.coin }}
								</span>
							</div>

							<el-icon v-if="item.coin === sellCoinSelected.coin" color="rgb(17,76,238)"><Select /></el-icon>
						</div>
					</el-option>
				</el-select>
			</div>
			<p v-if="showTips.useCoin">限额:{{ limit.sellCoin[sellCoinSelected.coin].content }} </p>
		</div>


		<!-- 您收到 -->
		<div class="quick-top-box-right-div mt-20px">
			<p>您收到</p>
			<div class="flex items-center justify-between">
				<el-input v-model="getAmount" :placeholder="limit.getCoin[getCoinSelected.coin].content" @blur="getBlur"
					@focus="getFocus('get')" class="quick-top-box-right-input" clearable style="height:40px;" />
				<img :src="getCoinSelected.icon" style="width: 20px;height:20px;">
				<el-select v-model="getCoinSelected.coin" :suffix-icon="CaretBottom" class="m-2 quick-top-box-right-select"
					size="large" @change="getCoinSelectedChange" style="width: 100px;height: 40px;"
					popper-class="c2c-select-popper" placement="bottom-end">
					<el-option v-for="(item, index) in getCoinList" :label="item.coin" :value="item.coin" :key="index">
						<div>
							<div>
								<img :src="item.icon" alt="">
								<span class="text-dark-700">
									{{ item.coin }}
								</span>
							</div>

							<el-icon v-if="item.coin === getCoinSelected.coin" color="rgb(17,76,238)"><Select /></el-icon>
						</div>
					</el-option>
				</el-select>
			</div>
			<p v-if="showTips.coin">限额:{{ limit.getCoin[getCoinSelected.coin].content }} </p>
		</div>
		<!-- 参考单价 -->
		<div class="absolute bottom-80px">
			<el-popover placement="top-start" :width="400" trigger="hover"
				content="此参考单价是根据C2C交易市场上的当前报价所估算，点击“选择支付方式”以获取最终报价">
				<template #reference>
					<p class="w-200px">
						<span style="font-size: 14px;color:#86909C">
							参考单价：
						</span>
						<span style="font-size: 14px;color:#000000">
							1{{ sellCoinSelected.coin }} = 20{{ getCoinSelected.coin }}
						</span>
					</p>
				</template>
			</el-popover>
		</div>
		<!-- 选择支付方式 -->
		<div class="absolute bottom-10px w-full">
			<el-button type="info" color="#07B175 " style="width: 100%;height: 50px;color:#fff;"
				:disabled="payButtonDisabled"
				@click="payBtnClick">
				选择支付方式
			</el-button>
		</div>
	</div>
</template>
<script setup lang="ts">
import { CaretBottom } from '@element-plus/icons-vue';

const emit = defineEmits(['payClick','changeCoin'])
// 点击下单按钮事件
function payBtnClick() {
	emit('payClick','pay')
}
// 所有支付币种
const sellCoinList = ref<any>([
	{
		icon: '/transaction/c2c/quick/CNY.svg',
		coin: 'CNY'
	},
	{
		icon: '/transaction/c2c/quick/VND.svg',
		coin: 'VND'
	}
])
// 选中支付币种
const sellCoinSelected = ref<any>({
	icon: '/transaction/c2c/quick/CNY.svg',
	coin: 'CNY'
})

// 限额
const limit = ref<any>({
	getCoin: {
		BTC: {
			min: 50,
			max: 200000,
			unit: 'BTC',
			content: '0.001 ETH - 20.00201559 ETH',
		},
		TRX: {
			min: 50,
			max: 200000,
			unit: 'BTC',
			content: '0.001 ETH - 20.00201559 ETH',
		},
		ETH: {
			min: 50,
			max: 200000,
			unit: 'BTC',
			content: '0.001 ETH - 20.00201559 ETH',
		},
		USDT: {
			min: 50,
			max: 200000,
			unit: 'BTC',
			content: '0.001 ETH - 20.00201559 ETH',
		}
	},
	sellCoin: {
		CNY: {
			min: 100,
			max: 200000,
			unit: '￥',
			content: '￥100 - ￥200,000',
		},
		VND: {
			min: 50,
			max: 200000,
			unit: '￥',
			content: '￥50 - ￥200,000',
		}
	}
})
// 得到币种
const getCoinList = ref<any>([
	{
		icon: '/purchase/btc.svg',
		coin: 'BTC'
	},
	{
		icon: '/purchase/eth.svg',
		coin: 'ETH'
	},
	{
		icon: '/purchase/trx.svg',
		coin: 'TRX'
	},
	{
		icon: '/purchase/usdt.svg',
		coin: 'USDT'
	}
])
// 得到支付币种
const getCoinSelected = ref<any>({
	icon: '/purchase/btc.svg',
	coin: 'BTC'
})
// 选中币种
function sellCoinSelectedChange(val: any) {
	sellCoinList.value.forEach((item: any) => {
		if (item.coin === val) {
			sellCoinSelected.value.icon = item.icon;
		}
	});
	emit('changeCoin',sellCoinSelected.value,getCoinSelected.value)
}
function getCoinSelectedChange(val: any) {
	getCoinList.value.forEach((item: any) => {
		if (item.coin === val) {
			getCoinSelected.value.icon = item.icon;
		}
	});
	emit('changeCoin',sellCoinSelected.value,getCoinSelected.value)
}
// 出售金额
const sellAmount = ref<string>('')
// 得到金额
const getAmount = ref<string>('')

// 是否显示提示
const showTips = ref<any>({
	sellCoin: false,
	getCoin: false
})
// 获得焦点时触发
function getFocus(str: string) {
	if (str == 'sell') {
		showTips.value.useCoin = true;
	}
	if (str == 'get') {
		showTips.value.coin = true;
	}
}
// 失去焦点触发
function getBlur() {
	if (sellAmount.value === '') {
		showTips.value.useCoin = false;
	}
	if (getAmount.value === '') {
		showTips.value.coin = false;
	}
}
// 支付按钮是否启用
const payButtonDisabled = ref<boolean>(true)

watchEffect(() => {
	if (sellAmount.value !== '') {
		if (getAmount.value !== '') {
			payButtonDisabled.value = false
		} else {
			payButtonDisabled.value = true
		}
	} else {
		payButtonDisabled.value = true
	}
})

defineExpose({
	sellCoinSelected,
	getCoinSelected
})
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
	color: #000000;
	font-size: 20px;
}

.quick-top-box-right-div {
	padding: 10px;
	border: 1px solid #E5E6EB;

	>p:nth-child(1) {
		font-size: 16px;
		color: #000000;
	}

	>div:nth-child(2) {

		::v-deep .el-input,
		::v-deep .el-input__wrapper {
			border: none;
			box-shadow: none;
			/* 如果有阴影，也可以关闭 */
			padding: 0 1px;
		}

		::v-deep .el-select__wrapper {
			border: none;
			box-shadow: none;
			padding: 0 1px;
		}

		::v-deep .el-select__selected-item {
			color: #20232A;
			font-weight: bold;
			font-size: 16px;
		}

	}

	>p:nth-child(3) {
		font-size: 14px;
		color: #F34E5F;
	}
}
</style>

